過去我們使用下面這樣的設定
.container {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
讓文字內容不會自動斷行、不顯示溢出的內容,同時使用 ellipsis
來加入「...」。不過這種方法的限制是,他最終只會變成一行。如果今天想要設定顯示多行的情況,可以採用 -webkit-line-clamp 的做法:
.container {
display: -webkit-box;
width: 100px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
在這樣的情況下,就會顯示最多三行的內容,剩下的內容將會被隱藏。同時在可見範圍的最後會加上「...」
現在我們可以讓內容自動的「只呈現三行」,不過由於是 css 幫我們自動完成的,如果我們想要知道到底哪一個 container 當中的內容是完整展現、或者是被隱藏的話,可以透過選取該 element,然後比較 scrolHeight
與 clientHeight
。
scrolHeight
代表要完整呈現內容所需要的高度
clientHeigh
是 container 當中的高度,包含 padding 但是不包含 border, margin 和 scrolbar 的高度
另外還有一個是 offsetHeight
則是 container 當中的高度,包含 padding, border, margin 和 scrolbar 的高度
所以只要比較 scrolHeight
與 clientHeight
就可以知道這個 container 當中的內容是否有被隱藏囉。
在最近的 task 當中,我透過這個方法,來決定是否要顯示打開 modal 的 button
<div #container class="ontainer">{{ content }}</div>
<div *ngIf="noteContainer.scrollHeight > noteContainer.clientHeigh"
(click)="openModal(content)"
>
more
</div>